<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>上传图片</title>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script src="${base}/js/axios.min.js"></script>

</head>

<body>

		  
		  
	<div id="uploadDiv">
	
			<el-upload
			  action="${base}/upload/action"
			  accept="image/jpeg,image/gif,image/png"
			  list-type="picture-card"
			  :on-preview="handlePictureCardPreview"
			  :on-remove="handleRemove"
			  :on-success="uploadSuccess"
			  name="multipartFile"
			  >
	     <el-button size="small" type="primary">点击上传</el-button>
         <div slot="tip" class="el-upload__tip">请上传图片格式文件</div>
			  
			</el-upload>
			<el-dialog :visible.sync="dialogVisible">
			  <img width="100%" :src="dialogImageUrl" alt="">
			</el-dialog>

	
	    <el-divider>  </el-divider>
	
	
		<el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
		  <el-form-item label="标题" prop="pass">
		    <el-input type="text" v-model="ruleForm.title" autocomplete="off"></el-input>
		  </el-form-item>
		  <el-form-item label="标签" prop="checkPass">
		    <el-input type="text" v-model="ruleForm.tags" autocomplete="off"></el-input>
		  </el-form-item>
		  <el-form-item>
		    <el-button type="primary" @click="submitForm()">提交</el-button>
		  </el-form-item>
		</el-form>
	</div>
	
<script type="text/javascript">
	var content = new Vue({
		  el: '#uploadDiv',
		  data: {
		        ruleForm: {
		        	title: '',
		        	tags: '',
		        	fileName:''
		          },
		          dialogImageUrl: '',
		          dialogVisible: false,
		          disabled: false
		  },
		  methods: {
		        submitForm() {
		        	alert("已经成功!");
		        },
		        noAyncHttp (url, params) {
		  		  return new Promise(function (resolve, reject) {
		  		    axios
		  		      .post(url, params)
		  		      .then((response) => {
		  		          resolve(response.data)
		  		        }
		  		      )
		  		      .catch((error) => { // 请求失败处理
		  		        reject(error)
		  		      })
		  		  })
		  		},
		  		uploadSuccess(response,file,fileList) {
		  	        console.log(file.response.data);
		  	        const formParams = new FormData()
			          if (file.response.data) {
			            formParams.append('fileName', file.response.data)
			          }
			  	      if (content.ruleForm.title) {
				            formParams.append('title', content.ruleForm.title)
				          }
			  	      if (content.ruleForm.tags) {
			               formParams.append('tags', content.ruleForm.tags)
			          }
			        this.noAyncHttp('${base}' + '/picture/updateByFileName', formParams).then((res) => {
				        	console.log(res.data)
				          }, (error) => {
				            console.error('出错了', error)
				          })
		  	    },
		  		handleRemove(file) {
		  	        console.log(file.response.data);
		  	        const formParams = new FormData()
			          if (file.response.data) {
			            formParams.append('fileName', file.response.data)
			          }
			        this.noAyncHttp('${base}' + '/picture/deleteByFileName', formParams).then((res) => {
				        	console.log(res.data)
				          }, (error) => {
				            console.error('出错了', error)
				          })
		  	      },
	  	        handlePictureCardPreview(file) {
		  	        this.dialogImageUrl = file.url;
		  	        this.dialogVisible = true;
		  	        console.log(file.url);
	  	        }
		        
		     }
		})
	
	

</script>	
	
	
</body>
</html>